正方体|螺旋桨_Three.js案例从0到1复杂的计算组合生成几何体

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Three.js案例从0到1复杂的计算组合生成几何体相关的知识，希望对你有一定的参考价值。

1. 重构初始化&＃xff0c;结构性更好

主程序

function init(event)
console.log("main js start. ")
createScene();
createLights();
createSea();

animate();
window.addEventListener(&＃39;load&＃39;, init, false);

创建场景和灯光分开

function createScene()
HEIGHT &＃61; window.innerHeight;
WIDTH &＃61; window.innerWidth;
scene &＃61; new THREE.Scene();
aspectRatio &＃61; WIDTH / HEIGHT;
fieldOfView &＃61; 60;
nearPlane &＃61; 1;
farPlane &＃61; 10000;
camera &＃61; new THREE.PerspectiveCamera(
fieldOfView,
aspectRatio,
nearPlane,
farPlane
);
scene.fog &＃61; new THREE.Fog(0xf7d9aa, 100, 950);
camera.position.x &＃61; 0;
camera.position.z &＃61; 200;
camera.position.y &＃61; 100;
renderer &＃61; new THREE.WebGLRenderer( alpha: true, antialias: true );
renderer.setSize(WIDTH, HEIGHT);
renderer.shadowMap.enabled &＃61; true;
container &＃61; document.getElementById(&＃39;world&＃39;);
container.appendChild(renderer.domElement);
window.addEventListener(&＃39;resize&＃39;, handleWindowResize, false);
// LIGHTS
var ambientLight, hemisphereLight, shadowLight;
function createLights()
hemisphereLight &＃61; new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9)
shadowLight &＃61; new THREE.DirectionalLight(0xffffff, .9);
shadowLight.position.set(150, 350, 350);
shadowLight.castShadow &＃61; true;
shadowLight.shadow.camera.left &＃61; -400;
shadowLight.shadow.camera.right &＃61; 400;
shadowLight.shadow.camera.top &＃61; 400;
shadowLight.shadow.camera.bottom &＃61; -400;
shadowLight.shadow.camera.near &＃61; 1;
shadowLight.shadow.camera.far &＃61; 1000;
shadowLight.shadow.mapSize.width &＃61; 2048;
shadowLight.shadow.mapSize.height &＃61; 2048;
scene.add(hemisphereLight);
scene.add(shadowLight);


加入了屏幕调整自适应


function handleWindowResize()
HEIGHT &＃61; window.innerHeight;
WIDTH &＃61; window.innerWidth;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect &＃61; WIDTH / HEIGHT;
camera.updateProjectionMatrix();


sea和plane的创建实例

// 创建实例化sea函数
function createSea()
sea &＃61; new Sea();
sea.mesh.position.y &＃61; -600;
scene.add(sea.mesh);


动画效果


function animate()
requestAnimationFrame(animate);
//海浪效果
sea.mesh.rotation.z &＃43;&＃61; .005;

renderer.render(scene, camera);
;

完成效果

2. 建立复杂模型&＃xff0c;用模型组合成飞机&＃xff0c;并实例化

// 创建飞机模型
AirPlane &＃61; function()
this.mesh &＃61; new THREE.Object3D();
// 创建机舱
var geomCockpit &＃61; new THREE.BoxGeometry(60, 50, 50, 1, 1, 1);
var matCockpit &＃61; new THREE.MeshPhongMaterial(
color: Colors.red,
shading: THREE.FlatShading
);
var cockpit &＃61; new THREE.Mesh(geomCockpit, matCockpit);
cockpit.castShadow &＃61; true;
cockpit.receiveShadow &＃61; true;
this.mesh.add(cockpit);
// 创建引擎
var geomEngine &＃61; new THREE.BoxGeometry(20, 50, 50, 1, 1, 1);
var matEngine &＃61; new THREE.MeshPhongMaterial(
color: Colors.white,
shading: THREE.FlatShading
);
var engine &＃61; new THREE.Mesh(geomEngine, matEngine);
engine.position.x &＃61; 40;
engine.castShadow &＃61; true;
engine.receiveShadow &＃61; true;
this.mesh.add(engine);
// 创建机尾
var geomTailPlane &＃61; new THREE.BoxGeometry(15, 20, 5, 1, 1, 1);
var matTailPlane &＃61; new THREE.MeshPhongMaterial(
color: Colors.red,
shading: THREE.FlatShading
);
var tailPlane &＃61; new THREE.Mesh(geomTailPlane, matTailPlane);
tailPlane.position.set(-35, 25, 0);
tailPlane.castShadow &＃61; true;
tailPlane.receiveShadow &＃61; true;
this.mesh.add(tailPlane);
// 创建机翼
var geomSideWing &＃61; new THREE.BoxGeometry(40, 8, 150, 1, 1, 1);
var matSideWing &＃61; new THREE.MeshPhongMaterial(
color: Colors.red,
shading: THREE.FlatShading
);
var sideWing &＃61; new THREE.Mesh(geomSideWing, matSideWing);
sideWing.castShadow &＃61; true;
sideWing.receiveShadow &＃61; true;
this.mesh.add(sideWing);
// 创建螺旋桨
var geomPropeller &＃61; new THREE.BoxGeometry(20, 10, 10, 1, 1, 1);
var matPropeller &＃61; new THREE.MeshPhongMaterial(
color: Colors.brown,
shading: THREE.FlatShading
);
this.propeller &＃61; new THREE.Mesh(geomPropeller, matPropeller);
this.propeller.castShadow &＃61; true;
this.propeller.receiveShadow &＃61; true;
// 创建螺旋桨的桨叶
var geomBlade &＃61; new THREE.BoxGeometry(1, 100, 20, 1, 1, 1);
var matBlade &＃61; new THREE.MeshPhongMaterial(
color: Colors.brownDark,
shading: THREE.FlatShading
);
// 创建机翼
var blade &＃61; new THREE.Mesh(geomBlade, matBlade);
blade.position.set(8, 0, 0);
blade.castShadow &＃61; true;
blade.receiveShadow &＃61; true;
this.propeller.add(blade);
this.propeller.position.set(50, 0, 0);
this.mesh.add(this.propeller);
;
// 实例化飞机函数
function createPlane()
airplane &＃61; new AirPlane();
airplane.mesh.scale.set(.25, .25, .25);
airplane.mesh.position.y &＃61; 100;
scene.add(airplane.mesh);


主场景添加飞机模型&＃xff0c;动画添加螺旋桨转动效果

function init(event)
console.log("main js start. ")
createScene();
createLights();
createSea();
createPlane();
animate();


 animate添加

airplane.propeller.rotation.x &＃43;&＃61; 0.3;

运行效果&＃xff1a;

 3. 由立方体组合成云朵&＃xff0c;云朵变化组成天空效果

用立方体组合创建云朵&＃xff0c;用到了随机生成


// 创建云
Cloud &＃61; function()
// 创建一个空的容器放置不同形状的云
this.mesh &＃61; new THREE.Object3D();
this.mesh.name &＃61; "cloud";
// 创建一个正方体
// 这个形状会被复制创建云
var geom &＃61; new THREE.BoxGeometry(20, 20, 20);
// 创建材质&＃xff1b;一个简单的白色材质就可以达到效果
var mat &＃61; new THREE.MeshPhongMaterial(
color: Colors.white,
);
// 随机多次复制几何体
var nBlocs &＃61; 3 &＃43; Math.floor(Math.random() * 3);
for (var i &＃61; 0; i // 通过复制几何体创建网格
var m &＃61; new THREE.Mesh(geom.clone(), mat);
// 随机设置每个正方体的位置和旋转角度
m.position.x &＃61; i * 15;
m.position.y &＃61; Math.random() * 10;
m.position.z &＃61; Math.random() * 10;
m.rotation.z &＃61; Math.random() * Math.PI * 2;
m.rotation.y &＃61; Math.random() * Math.PI * 2;
// 随机设置正方体的大小
var s &＃61; .1 &＃43; Math.random() * .9;
m.scale.set(s, s, s);
// 允许每个正方体生成投影和接收阴影
m.castShadow &＃61; true;
m.receiveShadow &＃61; true;
// 将正方体添加至开始时我们创建的容器中
this.mesh.add(m);




创建天空

// 创建天空
Sky &＃61; function()
this.mesh &＃61; new THREE.Object3D();
this.nClouds &＃61; 20;
this.clouds &＃61; [];
var stepAngle &＃61; Math.PI * 2 / this.nClouds;
for (var i &＃61; 0; i var c &＃61; new Cloud();
this.clouds.push(c);
var a &＃61; stepAngle * i;
var h &＃61; 750 &＃43; Math.random() * 200;
c.mesh.position.y &＃61; Math.sin(a) * h;
c.mesh.position.x &＃61; Math.cos(a) * h;
c.mesh.position.z &＃61; -400 - Math.random() * 400;
c.mesh.rotation.z &＃61; a &＃43; Math.PI / 2;
var s &＃61; 1 &＃43; Math.random() * 2;
c.mesh.scale.set(s, s, s);
this.mesh.add(c.mesh);

// 创建实例
function createSky()
sky &＃61; new Sky();
sky.mesh.position.y &＃61; -600;
scene.add(sky.mesh);


形成动画效果

//天空效果
sky.mesh.rotation.z &＃43;&＃61; .01;

动画效果

 完整例子下载

three.js从0到1实操案例&＃xff0c;完整目录&＃xff0c;直接可用-Javascript文档类资源-CSDN下载